<script src="<?php echo $this->asset('assets/js/primitives.min.js') ?>"></script>
<script src="<?php echo $this->asset('assets/js/bporgeditor.min.js') ?>"></script>
<script>
    var map;
    var options;
    
    
    $(function(){
        var options = new primitives.orgdiagram.Config();    

        var EasyLib = new primitives.orgdiagram.ItemConfig();
        EasyLib.title = "EasyLib";
        EasyLib.description = "";
        EasyLib.hasSelectorCheckbox = false;
        EasyLib.image = "<?php echo Atomik::asset("assets/images/logo-min.png") ?>";

        var Atomik = new primitives.orgdiagram.ItemConfig();
        Atomik.title = "Framework Atomik";
        Atomik.description = "Framework MVC";
        Atomik.hasSelectorCheckbox = false;
        Atomik.templateName = "contactTemplate";
        Atomik.image = "<?php echo Atomik::asset("assets/images/logo-atomik-min.png") ?>";
        EasyLib.items.push(Atomik);
        
        var PHP = new primitives.orgdiagram.ItemConfig();
        PHP.title = "PHP";
        PHP.description = "Programmation serveur";
        PHP.hasSelectorCheckbox = false;
        PHP.templateName = "contactTemplate";
        PHP.image = "http://static.php.net/www.php.net/images/php.gif";
        Atomik.items.push(PHP);
        
        var CSS = new primitives.orgdiagram.ItemConfig();
        CSS.title = "CSS";
        CSS.description = "Design du site";
        CSS.hasSelectorCheckbox = false;
        CSS.templateName = "contactTemplate";
        CSS.image = "http://www.idleman.fr/blog/wp-content/uploads/2011/10/CSS.png";
        Atomik.items.push(CSS);
        
        var bootstrap = new primitives.orgdiagram.ItemConfig();
        bootstrap.title = "BootStrap";
        bootstrap.description = "Plugin CSS";
        bootstrap.hasSelectorCheckbox = false;
        bootstrap.templateName = "contactTemplate";
        bootstrap.image = "http://www.concrete5.org/files/2013/4742/0265/bootstrap_screenshot_0_1347420265.png";
        CSS.items.push(bootstrap);
        
        var javascript = new primitives.orgdiagram.ItemConfig();
        javascript.title = "JavaScript";
        javascript.description = "Programmation client";
        javascript.hasSelectorCheckbox = false;
        javascript.templateName = "contactTemplate";
        javascript.image = "http://fr.tuto.com/images/interface/Logoslogiciels100x100/javascript.jpg";
        Atomik.items.push(javascript);
        
        var gmap = new primitives.orgdiagram.ItemConfig();
        gmap.title = "Google Map API";
        gmap.description = "Gestion des cartes";
        gmap.hasSelectorCheckbox = false;
        gmap.templateName = "contactTemplate";
        gmap.image = "http://kinlane-productions.s3.amazonaws.com/google/google-map-logo.gif";
        javascript.items.push(gmap);
        
        var _jQuery = new primitives.orgdiagram.ItemConfig();
        _jQuery.title = "jQuery";
        _jQuery.description = "Programmation client avancée";
        _jQuery.hasSelectorCheckbox = false;
        _jQuery.templateName = "contactTemplate";
        _jQuery.image = "<?php echo Atomik::asset("assets/images/logo-jquery.png") ?>";
        javascript.items.push(_jQuery);
        
        var Propel = new primitives.orgdiagram.ItemConfig();
        Propel.title = "Propel ORM";
        Propel.description = "mapping objet-relationnel (en anglais object-relational mapping ou ORM)";
        Propel.hasSelectorCheckbox = false;
        Propel.templateName = "contactTemplate";
        Propel.image = "<?php echo Atomik::asset("assets/images/logo-min.png") ?>";
        PHP.items.push(Propel);
        
        var html2pdf = new primitives.orgdiagram.ItemConfig();
        html2pdf.title = "HTML2PDF";
        html2pdf.description = "Générateur de PDF";
        html2pdf.hasSelectorCheckbox = false;
        html2pdf.templateName = "contactTemplate";
        html2pdf.image = "http://ext4mage.com/media/catalog/product/cache/1/small_image/170x/9df78eab33525d08d6e5fb8d27136e95/h/t/html2pdf-extension-icon.png";
        PHP.items.push(html2pdf);
    
        
        var MySQL = new primitives.orgdiagram.ItemConfig();
        MySQL.title = "MySQL";
        MySQL.description = "Base de données MySQL";
        MySQL.hasSelectorCheckbox = false;
        MySQL.templateName = "contactTemplate";
        MySQL.image = "http://www.mysql.fr/common/logos/logo-mysql-110x57.png";
        Propel.items.push(MySQL);
        
        var _jQueryMobile = new primitives.orgdiagram.ItemConfig();
        _jQueryMobile.title = "JQuery Mobile";
        _jQueryMobile.description = "Interface graphique de JQuery pour mobile";
        _jQueryMobile.hasSelectorCheckbox = false;
        _jQueryMobile.templateName = "contactTemplate";
        _jQueryMobile.image = "https://si0.twimg.com/profile_images/2633978789/80508321d8ce3ba8aa264380bb7eba33.png";
        _jQuery.items.push(_jQueryMobile);
        
        var _jQueryUI = new primitives.orgdiagram.ItemConfig();
        _jQueryUI.title = "JQuery UI";
        _jQueryUI.description = "Interface graphique de JQuery";
        _jQueryUI.hasSelectorCheckbox = false;
        _jQueryUI.templateName = "contactTemplate";
        _jQueryUI.image = "<?php echo Atomik::asset("assets/images/logo-jquery.png") ?>";
        _jQuery.items.push(_jQueryUI);
        
        var datatable = new primitives.orgdiagram.ItemConfig();
        datatable.title = "Datatable";
        datatable.description = "Plugin JQuery pour réaliser des tableaux dynamiques";
        datatable.hasSelectorCheckbox = false;
        datatable.templateName = "contactTemplate";
        datatable.image = "<?php echo Atomik::asset("assets/images/logo-jquery.png") ?>";
        _jQuery.items.push(datatable);
        
        var FullCalendar = new primitives.orgdiagram.ItemConfig();
        FullCalendar.title = "FullCalendar";
        FullCalendar.description = "Gestion des plannings";
        FullCalendar.hasSelectorCheckbox = false;
        FullCalendar.templateName = "contactTemplate";
        FullCalendar.image = "<?php echo Atomik::asset("assets/images/logo-jquery.png") ?>";
        _jQueryUI.items.push(FullCalendar);

        options.rootItem = EasyLib;
        options.cursorItem = EasyLib;
        options.hasSelectorCheckbox = primitives.common.Enabled.True;
        options.templates = [getContactTemplate()];

        $("#knowledgemap").orgDiagram(options);
        
        function getContactTemplate() {
            var result = new primitives.orgdiagram.TemplateConfig();
            result.name = "contactTemplate";

            result.itemSize = new primitives.common.Size(220, 120);
            result.minimizedItemSize = new primitives.common.Size(3, 3);
            result.highlightPadding = new primitives.common.Thickness(2, 2, 2, 2);
            return result;
        }
    });
</script>
<h1>Technologies utilisés</h1>
<div style="width: 1600px; height: 1000px" id="knowledgemap"></div>